// import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { login } from '@/api/login';
import { Button, Form, Input, message } from 'antd';
import React, { useEffect, useState } from 'react';
import pandahand from '../../images/hand.svg';
import logo from '../../images/logo.svg';
import pandaImg from '../../images/panda.png';
import styles from './index.less';
import { history } from 'umi';

const Login: React.FC = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [isPasswordFocused, setIsPasswordFocused] = useState(false);


  const [visibleEye, setVisibleEye] = useState(false);

  useEffect(() => {
    // console.log(`visibleEye---->${visibleEye}`);
  }, [visibleEye]);

  const onFinish = async (values: any) => {
    console.log('Success:', values);
    const result: any = await login({
      username: username,
      password: password,
    });
    if (result.code === 200) {
      // 将返回的username和token保存到本地中
      localStorage.setItem('userData', JSON.stringify(result.data.user));
      localStorage.setItem('token', result.data.token);
      // 提示登陆成功
      message.success('登录成功');
      // 跳转到首页
      history.push('/home');
    } else {
      message.error(result.message);
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // 判断输入框是否为空，设置登录按钮状态
  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value);
  };
  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  // const handlePasswordBlur = () => {
  //   setIsPasswordFocused(false);
  // };

  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginBox}>
        <div className={styles.pandaBox}>
          <img
            className={`${styles.pandaImg} ${
              isPasswordFocused || visibleEye ? styles.pandaBoxFocused : ''
            }`}
            src={pandaImg}
            alt="Panda"
          />
        </div>
        <Form
          className={styles.loginForm}
          name="basic"
          labelCol={{ span: 0 }}
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <div className={styles.loginLogo}>
            <img className={styles.pandaLogo} src={logo} alt="Panda" />
            <span className={styles.title}>用户登录</span>
          </div>
          <Form.Item
            name="username"
            className={styles.formItem}
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input
              className={styles.formInput}
              placeholder="username"
              value={username}
              onChange={handleUsernameChange}
            />
          </Form.Item>
          <Form.Item
            name="password"
            className={styles.formItem}
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password
              className={styles.formInput}
              placeholder="password"
              value={password}
              onChange={handlePasswordChange}
              visibilityToggle={{
                visible: visibleEye,
                onVisibleChange: (visible) => setVisibleEye(visible),
              }}
              onClick={() => setIsPasswordFocused(true)}
              onBlur={() => setIsPasswordFocused(false)}
            />
          </Form.Item>

          <Form.Item
            className={styles.formItemBtn}
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Button
              className={styles.button}
              type="primary"
              htmlType="submit"
              disabled={!username || !password}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
        <div className={styles.handBox}>
          <img className={styles.pandaHand} src={pandahand} alt="Panda" />
        </div>
      </div>
    </div>
  );
};

export default Login;
